校招进行时（四）---css基础

恩，小菜鸟又来了，上篇文章在这，话不多说，这次罗列总结一下css基础知识，和我一样的菜鸟可以看看。

引入方式

css的引入方式主要有以下几种：

外部样式表

通过在head标签中加入link标签来引入外部样式表，因为其良好的分离性和可维护性，大多数css样式都是通过这种方式引入的
内部样式表

直接将css样式放入style标签置于head标签内
内联样式表

直接将css样式写入html元素的style属性

盒子模型与BFC

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性（颜色，背景，边框方面）和位置是渲染引擎的目标。

在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边（margin）, 边框边（border）, 内填充边（padding）与内容边（content）

行内元素和块级元素

内联元素(inline)

和相邻的内联元素在同一行
padding和margin的left和right可以进行设置改变
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，固定为里面文字或图片撑开的大小

块级元素(block)

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

内联块元素（inline-block）

拥有内在尺寸，可设置高宽，但不会自动换行
一些浏览器默认的inline-block元素： input 、img 、button 、textarea 、label

外边距重叠

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

BFC

Formatting context

在说BFC之前，先解释一下Formatting context，即FC。其是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC内部规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个box的margin-left，与内容块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算

BFC的作用

BFC的常用功能如下

文档布局
清除浮动
清除重叠外边距

触发BFC的条件

根元素
float属性不为none
overflow不为visible
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex

例子

自适应两栏式布局

<style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }
    .aside {
        width: 200px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        overflow: hidden;
        background: #fcc;
    }
</style>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果

根据BFC第三条规则，虽然存在浮动元素aside，但是main元素的左边依然会跟包含块的border相接触，这时通过设置main元素的overflow：hidden触发产生一个新的BFC，便实现了简单的两栏自适应布局。

更多例子可以查看

选择器与优先级

选择器

css通过选择器关联html标签，以达到控制html元素样式的效果，基本的选择器有以下几种：

派生选择器：直接用html标签进行选择
类选择器：使用html元素的class属性进行选择
id选择器：使用html元素的id属性进行选择

以上三种选择器为css中最基本的选择器，其他选择器都是三者的延伸、扩展或者组合，例如：

伪元素选择器：利用 : 选择伪元素
后代选择器：利用空格进行后代的选择
```
  .header .nav{//选取header类中的nav类}
```
兄弟选择器（猫头鹰选择器）：使用+来选择两个紧接着的元素，且它们拥有相同的父元素，因为其样子酷似猫头鹰，所以又被称为猫头鹰选择器，猫头鹰选择器虽然冷门，但是应用在多个相同元素的排列的时候会自动帮你处理一些边缘问题，这里就不展开了详情请戳
```
  .warp div + div{//选取warp类下的所有兄弟div}
```

群组选择器：利用逗号进行多个元素的选取

  div, .avatar, a{//选取所有div、avatar类和a标签}

属性选择器：利用中括号选择带有特定属性的元素
```
  a[title]{//选择所有带有title属性的a标签}
```

优先级（特殊性）

一般来说，越复杂越精确的选择器优先级就越高，在css权威指南上，是这样来定义和区分优先级的：

选择器的特殊性由选择器本身的组件确定。特殊性值表现为4个部分，如：0， 0， 0， 0

一个选择器的具体特殊性如下确定：

对于选择器中给定的各个ID属性值，加 0100
对于选择器中给定的各个类属性值、属性选择或伪类，加 0010
对于选择器中给定的各个元素或伪元素，加 0001。伪元素是否有特殊性？在这方面CSS2有些自相矛盾，但是在CSS2.1中明确指出，伪元素有特殊性，并且为0001
结合符和统配选择器对特殊性没有任何贡献（后面还会更多地介绍这些值）
内联样式的声明特殊性都是1000
重要性：有时某个声明可能非常重要，超过了其他所有声明。CSS2.1称之为重要声明，并允许这些声明的结束分号之前插入 !important 来标志

CSS的优先级还遵循叠加规则，即

span#xxx .songs li{//这个选择器的特殊性为0112}

补充

* 号代表通配符，选取文档中的所有元素，一般不建议使用，首先过于暴力，其次影响渲染性能

样式最后的渲染效果与样式定义在文件中的先后顺序有关，即后面的覆盖前面的，与在html文档中的先后关系无关。例如：

<style>
  .A{ color:blue;}
  .B{ color:red;}
</style>

<body>
<p class='B A'> 123 </p>
</body>

最后“123”的颜色是 red

CSS Hack

什么是CSS Hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

CSS Hack的方法

条件注释法

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

类内属性前缀法

.hack{  
  background-color:red; /* All browsers */  
  background-color:blue !important;/* All browsers but IE6 */  
  *background-color:black; /* IE6, IE7 */  
  +background-color:yellow;/* IE6, IE7*/  
  background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
  background-color:purple\0; /* IE8, IE9, IE10 */  
  background-color:orange\9\0;/*IE9, IE10*/  
  _background-color:green; /* Only works in IE6 */  
}

媒体查询

@media \0screen\,screen\9 {
  .hack{
    /* IE 6 7 8 */
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .demo {
      /* Webkit内核 */
    }
}

基础布局

垂直居中

方法有很多，我大概罗列一下我用得比较多的

包裹法

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  float: left;
  height: 50%;
  margin-bottom: -150px;
}

#content {
  clear: both;
  height: 300px;
  position: relative;
}

这种方法在需要垂直居中的div外再包裹一个div，并将其设置浮动，margin-bottom为内部div的 1/2 * height，之后content触发BFC，内部也能放元素。优点是兼容性比较好，缺点是增加了额外的元素，并且高度不能改变。

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

用起来最舒服最简单的方法，但是，兼容性是个大问题，比如IE要IE11才兼容，很尴尬。

水平居中

水平居中比较简单，一般不会问到，但是作为复习也说得过去

margin

<div id="content">Content here</div>


#content {
  margin: 0 auto;
}

绝对定位

<div id="content">Content here</div>

.content {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -(width/2);
}

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  align-items: center;
}

栅格布局

原理

一个栅格布局一般分为：容器（container）、行（row）、列（col）

其中容器用于确定整体布局的宽度，设定了容器的宽度以后，再设置一个容器中容纳多少行，最后在在每一行中确定有多少列，同时列与列之间的间隔也被提前规定，这使得我们在布局的时候就很简单了，不用过多的考虑对齐问题。其中列是真正显示文档内容的元素。

列宽

一个能用的栅格系统，会提前准备一个声明列宽的类，将容器的宽度平分为几个等分，这个等分一般时3或4的倍数，这样比较容易排版，当然，分的越多排版越精确

嵌套

栅格系统可以嵌套，即列也可以作为容器继续嵌套栅格，这便是嵌套栅格

列的换行与行的偏移

一个完美支持响应式的栅格系统支持列的换行，即同一行的不同列之间的高度可以不相同，这种行为能够大大加强栅格系统的响应式能力。同时其还支持列的偏移，即可以不从第一列开始，将某几列作为空隙。

具体的栅格系统可参考bootstrap官网

后记

作为一个菜鸟能罗列收集的东西大概也就那么多了，还有一些比较基础的由于篇幅原因就没有放上来，当然还有好多也很重要的东西没罗列出来，这要归结于自己还是太菜，要是对你有帮助的话，就点个赞咯。有问题的话也接受一切批评和建议，我会努力加油的。上一篇文章在本篇头部，所有文章收录于我的博客中。